<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->
</head>
<body>
  <div  class="page_content">
    <div class="groupTitle"><span>示例说明</span></div>
    实际使用时可将用户操作结果存入用户表中，当用户刷新或者下次访问可以保留用户的定制
    <div class="height_10"></div>
		<div id="maingrid"></div>
 </div>   
	<script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"部门1","sex":"女","remark":"好啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"deptName":"部门1","sex":"男","remark":"备注啊","hobby":["唱歌"],"beginworkDate":"2012-06-13 00:00:00.0","photo":null,"version":null,"id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
      {"deptName":"部门1","sex":"女","remark":"不错啊","hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
      {"deptName":"部门1","sex":"男","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-12 00:00:00.0","photo":null,"version":null,"id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","remark":null,"hobby":["唱歌","跳舞"],"beginworkDate":"2012-06-05 00:00:00.0","photo":null,"version":null,"id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
      ]}
       
       //数据表格使用
        var g;
        var columnsDataArray=[ 
                  { display: '姓名', name: 'name', align: 'center',  width: 200},
                  { display: '性别', name: 'sex', align: 'center' , width: 200},
                  { display: '部门', name: 'deptName',  align: 'center' , width: 200},
                  { display: '学历', name: 'degree',  align: 'center', width: 200},
                  { display: '年龄', name: 'age',  align: 'center', width: 200},
                  { display: '爱好', name: 'hobby',  align: 'center', width: 200},
                  { display: '工作时间', name: 'beginworkDate',  align: 'center', width: 200},
                  { display: '备注', name: 'remark',  align: 'center', width: 200}
                  
                ]
        var opp={ display: '操作', isAllowHide: false, align: 'left', width: 200,
                        render: function (rowdata, rowindex, value, column){
                        return '<div class="grid_opp_container">'
                                   + '<span class="grid_opp_view" onclick="onView(' + rowdata.id + ')">查看</span>'
                                   + '<span class="grid_opp_edit" onclick="onEdit(' + rowdata.id + ')">修改</span>' 
                                   + '<span class="grid_opp_delete" onclick="onDelete(' + rowdata.id+','+rowindex + ')">删除</span>'
                               + '</div>';
                     }
                }
    function initComplete(){
       columnsDataArray.push(opp);
       g = $("#maingrid").quiGrid({
                columns:columnsDataArray , data:testData, pageSize: 10, rownumbers:true, checkbox:true,
                height: '100%', width:"100%",
           toolbar:{
             items:[
                {text: '列数定制与排序', click: sortHead, iconClass: 'icon_setting'}
              ]
            }
            });


		}
    function resetGrid(newColumnsData){
      var newData=newColumnsData.columns;
      newData.push(opp);
       g.set('columns', newData); 
      g.loadData(); 
    }

  function sortHead(){
    var diag = new top.Dialog();
    diag.Title = "表头定制";
    diag.URL = "../../sample_html/datagrid/column-order-content.html";
    diag.Width=380;
    diag.Height=400;
    diag.ShowButtonRow = true;
    diag.OKEvent = function() {
      diag.innerFrame.contentWindow.viewResule();
    };
    diag.show();
    }
    



        function onView(rowid){
      top.Toast("showNoticeToast", "选择的记录Id是:" + rowid );
    }
    
    function onEdit(rowid){
      top.Toast("showNoticeToast", "修改的记录Id是:" + rowid );
      // for (var record in g.records){
      //   if(g.records[record]['id']==rowid){
      //     top.Toast("showNoticeToast", JSON.stringify(g.records[record]));
      //   }
      // }
    }
    
    function onDelete(rowid,rowidx){
      top.Toast("showNoticeToast", "删除的记录Id是:" + rowid );
    }
    </script>	
</body>
</html>